<template>
  <div class="equipment-maintenance-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <el-button type="default" @click="goBack" icon="el-icon-arrow-left">
          返回
        </el-button>
        <h2 class="page-title">设备维修记录详情</h2>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleEdit" icon="el-icon-edit">
          编辑
        </el-button>
        <el-button type="danger" @click="handleDelete" icon="el-icon-delete">
          删除
        </el-button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="8" animated />
    </div>

    <!-- 主要内容区域 -->
    <div v-else class="main-content">
      <!-- 基本信息卡片 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span class="card-title">基本信息</span>
            <el-tag :type="getStatusType(detailData.handlingSituation)" size="medium">
              {{ getStatusText(detailData.handlingSituation) }}
            </el-tag>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">维修记录ID</label>
              <div class="info-value">{{ detailData.equipmentMaintenanceId || '--' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">设备名称</label>
              <div class="info-value">{{ detailData.equipmentName || '--' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">设备编码</label>
              <div class="info-value">{{ detailData.equipmentCode || '--' }}</div>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">维修项目</label>
              <div class="info-value">{{ detailData.maintenanceItem || '--' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">维修人员</label>
              <div class="info-value">{{ detailData.maintenancePerson || '--' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">维修时间</label>
              <div class="info-value">{{ formatDate(detailData.maintenanceTime) }}</div>
            </div>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">维修工时</label>
              <div class="info-value">{{ detailData.maintenanceHours ? detailData.maintenanceHours + ' 小时' : '--' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">维修费用</label>
              <div class="info-value cost-value">{{ detailData.maintenanceCost ? '¥' + detailData.maintenanceCost : '--' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">处理情况</label>
              <div class="info-value">
                <el-tag :type="getStatusType(detailData.handlingSituation)" size="small">
                  {{ getStatusText(detailData.handlingSituation) }}
                </el-tag>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 故障详情卡片 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span class="card-title">故障详情</span>
          </div>
        </template>
        
        <div class="fault-description">
          <div v-if="detailData.faultDescription" class="description-content">
            {{ detailData.faultDescription }}
          </div>
          <div v-else class="no-data">
            <i class="el-icon-info"></i>
            <span>暂无故障描述</span>
          </div>
        </div>
      </el-card>

      <!-- 处理情况卡片 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span class="card-title">处理情况</span>
          </div>
        </template>
        
        <div class="handling-situation">
          <div v-if="detailData.handlingSituation" class="situation-content">
            <el-tag :type="getStatusType(detailData.handlingSituation)" size="large">
              {{ getStatusText(detailData.handlingSituation) }}
            </el-tag>
            <div class="situation-desc">
              {{ getStatusDescription(detailData.handlingSituation) }}
            </div>
          </div>
          <div v-else class="no-data">
            <i class="el-icon-info"></i>
            <span>暂无处理情况</span>
          </div>
        </div>
      </el-card>

      <!-- 操作历史卡片 -->
      <el-card class="info-card">
        <template #header>
          <div class="card-header">
            <span class="card-title">操作历史</span>
          </div>
        </template>
        
        <el-timeline>
          <el-timeline-item
            timestamp="创建时间"
            placement="top"
            type="primary"
          >
            <div class="timeline-content">
              <h4>维修记录创建</h4>
              <p>维修记录已创建，等待处理</p>
            </div>
          </el-timeline-item>
          
          <el-timeline-item
            v-if="detailData.maintenanceTime"
            :timestamp="formatDate(detailData.maintenanceTime)"
            placement="top"
            type="success"
          >
            <div class="timeline-content">
              <h4>维修开始</h4>
              <p>维修人员 {{ detailData.maintenancePerson }} 开始维修工作</p>
            </div>
          </el-timeline-item>
          
          <el-timeline-item
            v-if="detailData.handlingSituation === '2'"
            timestamp="完成时间"
            placement="top"
            type="success"
          >
            <div class="timeline-content">
              <h4>维修完成</h4>
              <p>维修工作已完成，设备恢复正常</p>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </div>
</template>

<script>
import { equipmentMaintenanceApi } from '@/api/equipment'

export default {
  name: 'EquipmentMaintenanceDetail',
  data() {
    return {
      loading: false,
      detailData: {}
    }
  },
  
  mounted() {
    this.getMaintenanceDetail()
  },
  
  methods: {
    // 获取维修记录详情
    async getMaintenanceDetail() {
      const id = this.$route.params.id
      if (!id) {
        this.$message.error('缺少维修记录ID')
        this.goBack()
        return
      }
      
      try {
        this.loading = true
        const response = await equipmentMaintenanceApi.getMaintenanceDetail(id)
        
        if (response.code === 200) {
          this.detailData = response.data || {}
        } else {
          this.$message.error(response.data.message || '获取详情失败')
          this.goBack()
        }
      } catch (error) {
        console.error('获取维修记录详情失败:', error)
        this.$message.error('获取详情失败')
        this.goBack()
      } finally {
        this.loading = false
      }
    },
    
    // 编辑
    handleEdit() {
      this.$router.push(`/equipment-management/edit-maintenance/${this.$route.params.id}`)
    },
    
    // 删除
    async handleDelete() {
      try {
        await this.$confirm(
          `确定要删除设备"${this.detailData.equipmentName}"的维修记录吗？`,
          '删除确认',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        const response = await equipmentMaintenanceApi.deleteMaintenance(this.$route.params.id)
        
        if (response.code === 200) {
          this.$message.success('删除成功')
          this.$router.push('/equipment-management/equipment-maintenance')
        } else {
          this.$message.error(response.data.message || '删除失败')
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除失败:', error)
          this.$message.error('删除失败')
        }
      }
    },
    
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    
    // 格式化日期
    formatDate(date) {
      if (!date) return '--'
      return new Date(date).toLocaleDateString('zh-CN')
    },
    
    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        '0': 'info',
        '1': 'warning',
        '2': 'success',
        '3': 'danger'
      }
      return statusMap[status] || 'info'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        '0': '待处理',
        '1': '进行中',
        '2': '已完成',
        '3': '已取消'
      }
      return statusMap[status] || '未知'
    },
    
    // 获取状态描述
    getStatusDescription(status) {
      const descMap = {
        '0': '维修记录已创建，等待安排维修人员处理',
        '1': '维修工作正在进行中，请耐心等待',
        '2': '维修工作已完成，设备已恢复正常运行',
        '3': '维修记录已取消，可能因设备更换或其他原因'
      }
      return descMap[status] || '状态未知'
    }
  }
}
</script>

<style scoped>
.equipment-maintenance-detail {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header-right {
  display: flex;
  gap: 10px;
}

.page-title {
  margin: 0;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.loading-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.info-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.info-item {
  margin-bottom: 20px;
}

.info-label {
  display: block;
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 500;
}

.info-value {
  font-size: 16px;
  color: #333;
  word-break: break-all;
}

.cost-value {
  color: #E6A23C;
  font-weight: 600;
  font-size: 18px;
}

.fault-description,
.handling-situation {
  min-height: 100px;
}

.description-content,
.situation-content {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #409EFF;
  line-height: 1.6;
  color: #333;
}

.situation-content {
  text-align: center;
}

.situation-desc {
  margin-top: 15px;
  color: #666;
  font-size: 14px;
}

.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
  min-height: 80px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px dashed #ddd;
}

.no-data i {
  margin-right: 8px;
  font-size: 16px;
}

.timeline-content h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
}

.timeline-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .equipment-maintenance-detail {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .header-right {
    width: 100%;
    justify-content: flex-end;
  }
  
  .main-content {
    gap: 15px;
  }
  
  .info-card {
    margin-bottom: 15px;
  }
}

/* 卡片样式优化 */
.el-card {
  border: none;
}

.el-card__header {
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

/* 时间线样式 */
.el-timeline {
  padding-left: 20px;
}

.el-timeline-item__timestamp {
  color: #666;
  font-size: 13px;
}

/* 标签样式 */
.el-tag {
  font-weight: 500;
}
</style>
